.note-sidebar {
  background: $note-sidebar-color;
  border-right: 1px solid darken($note-sidebar-color, 10%);
  height: 100%;

  &:hover {
    overflow-y: auto;
  }

  &-header {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
    background: $note-sidebar-color;
    height: 49px;
    padding: 0 0.5rem;
    border-bottom: 1px solid darken($note-sidebar-color, 10%);
    input {
      -webkit-appearance: none;
      margin: 0;
      min-width: 0;
      padding: 0.5rem;
    }
  }

  .list-button {
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    color: $font-color;
    background: darken($note-sidebar-color, 8%);
    padding: 0.7rem;
    margin: 0 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: none !important;

    &:hover,
    &:focus {
      background: $variable;
      color: white;
      outline: none;
    }
  }

  .note-list {
    &-outer {
      display: flex;
      align-items: center;
      width: 100%;
    }

    &-each {
      cursor: pointer;
      padding: 0.5rem;
      border-bottom: 1px solid darken($note-sidebar-color, 8%);
      font-weight: 500;
      font-size: 0.85rem;
      line-height: 1.3;

      .highlighted {
        color: #3e64ff;
      }

      .note-category {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        color: rgba(0, 0, 0, 0.4);
        margin-left: 25px;

        svg {
          margin-right: 0.5rem;
        }
      }

      .note-title {
        display: flex;
        align-items: center;
        width: 100%;

        .icon {
          display: flex;
          flex: 0 0 25px;
        }

        .note-favorite {
          stroke: $primary;
          margin: 0.25rem;
        }

        .truncate-text {
          overflow: hidden;
          text-overflow: clip;
        }
      }

      &:hover {
        background: darken($note-sidebar-color, 5%);

        .note-options {
          color: $font-color;
        }
      }

      &.selected {
        background: $primary;
        color: white;
        border-bottom: 1px solid darken($primary, 5%);

        .note-category {
          color: rgba(255, 255, 255, 0.6);
        }

        &:hover {
          .note-options {
            color: white;
          }
        }

        .highlighted {
          background: white;
        }

        .note-options {
          &.selected {
            color: white;
          }
        }

        .note-favorite {
          stroke: white;
        }
      }

      .note-options {
        display: block;
        font-size: 1rem;
        color: transparent;
        padding: 0.4rem;
        z-index: 1;
        cursor: pointer;

        &.selected {
          color: $font-color;
        }
      }
    }
  }
}
